<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-menu"></i> 设备列表</el-breadcrumb-item>
                <el-breadcrumb-item>设备</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-button type="primary" icon="delete" class="handle-del mr10">批量删除</el-button>
            <el-select placeholder="设备状态" value="离线" class="handle-select mr10">
                <el-option key="1" label="在线" value="在线"></el-option>
                <el-option key="2" label="离线" value="离线"></el-option>
            </el-select>
            <el-input placeholder="筛选关键词" class="handle-input mr10"></el-input>
            <el-button type="primary" icon="search">搜索</el-button>
        </div>
        <el-table v-loading="loading" :data="tableData" border style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="设备ID" sortable width="150">
            </el-table-column>
            <el-table-column prop="name" label="设备名称" width="160">
            </el-table-column>
            <el-table-column prop="token" label="TOKEN" >
            </el-table-column>
            <el-table-column prop="status" label="设备状态" width="120">
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template scope="scope">
                    <el-button size="small" @click="edit(scope.row.id)">编辑</el-button>
                    <el-button size="small" type="danger" @click="delete_row(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination layout="prev, pager, next" :total="100">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      cur_page: 1,
      loading: true
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.loading = true;
      this.$axios.get("/api/device").then(res => {
        if (res.data.code == 0) {
          this.tableData = res.data.data;
        } else if (res.data.code == 2) {
          //未登录
          localStorage.removeItem("user");
          this.$message({
            message: "登录已过时，请重新登录",
            type: "warning"
          });
          this.$router.push("/login");
        }
      });
      this.loading = false;
    },
    delete_row(row) {
      this.$axios.delete("/api/device/" + row.id).then(res => {
        if (res.data.code == 0) {
          this.$message({
            message: "删除设备成功",
            type: "success"
          });
          this.getData();
        } else if (res.data.code == 2) {
          //未登录
          localStorage.removeItem("user");
          this.$router.push("/login");
        }
      });
    },
    edit(device_id) {
      this.$router.push("/node_manager/" + device_id);
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
</style>